<template>
  <div class="app-container">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 18px;font-weight: 600">
            <span style="color: #409EFF">{{moment().format('yyyy年MM月DD日')}}</span>设备预警统计
          </span>
        </div>
        <div class="consumption">
          <template v-for="item in warningData">
            <div class="consumption-item">
              <img
                class="consumption-item-img"
                src="@/assets/images/frontPage/NumberConsumers.jpg"
                alt=""
              />
              <div class="consumption-item-title">{{item.name}}</div>
              <div class="consumption-item-box">
                预警<span class="box-num"> {{item.count}} </span>次
              </div>
            </div>
          </template>
        </div>
      </el-card>
    <div class="container-center" style="margin-top: 20px">
      <el-card style="width: 100%">
        <div slot="header" class="card-title">
          <div>
            <el-select v-model="chartType" @change="chartTypeChange">
              <el-option label="水温仪器预警趋势图" :value="1"></el-option>
              <el-option label="水压仪器预警趋势图" :value="2"></el-option>
              <el-option label="智能路灯预警趋势图" :value="3"></el-option>
            </el-select>
          </div>
          <div style="margin-left: 20px">
            <el-date-picker v-if="chartType!==3" v-model="dataYear" value-format="yyyy" type="year" style="width: 100px" placeholder="选择年份" @change="dateChange" :clearable="false"></el-date-picker>
          </div>
        </div>
        <div  id="chartBox" style="width:100%;height: 300px"></div>

<!--        <div class="temperatureEchart" id="temperatureEchart" :style="temperatureChartStyle" v-if="chartType===1" ></div>-->
<!--        <div class="pressureEchart" id="pressureEchart" :style="pressureChartStyle" v-if="chartType===2"></div>-->
<!--        <div class="lightEchart" id="lightEchart" :style="lightChartStyle" v-if="chartType===3"></div>-->
      </el-card>
      <el-card v-show="false">
        <div slot="header" class="card-title">
          <span>水压仪器预警趋势图</span>
          <div>
            <el-date-picker v-model="waterPressureYear" value-format="yyyy" type="year" style="width: 100px" placeholder="选择年份" @change="getWaterPressure" :clearable="false">
            </el-date-picker>
          </div>
        </div>
      </el-card>
      <el-card v-show="false">
        <div slot="header" class="clearfix">
          <span>智能路灯预警趋势图</span>
        </div>
      </el-card>
    </div>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>预警信息</span>
      </div>
      <el-table stripe border :data="tableData" style="width: 100%">
        <el-table-column prop="content" label="预警信息" />
        <el-table-column prop="deviceId" label="设备编号" width="200" />
        <el-table-column prop="createTime" label="预警时间" width="200" />
        <el-table-column prop="location" label="安装地址" width="150" />
        <el-table-column prop="deviceName" label="预警设备" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {warningListTen} from '@/api/shop/goods';
import {getWarningData, waterPressureData, waterTemperatureData} from "@/api/device/device";
import moment from "moment/moment";

export default {
  data() {
    return {
      chartType:1,

      temperatureChartStyle: { float: "left", width: "100%", height: "300px" },
      pressureChartStyle: { float: "right", width: "100%", height: "300px" },
      lightChartStyle: { width: "100%", height: "300px"},
      xData: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ], //横坐标
      yData: [23, 24, 18,23, 24, 18, 25, 27, 28, 25, 25, 27], //数据
      tableData: [],
      waterTemperatureYear:'',
      waterPressureYear:'',
      dataYear:'',
      temperatureData:'',
      pressureData:'',
      warningData:[],
    };
  },
  created () {
    this.getWarningList();
    this.waterTemperatureYear=moment().format('YYYY')
    this.waterPressureYear=moment().format('YYYY')
    this.dataYear=moment().format('YYYY')
  },
  mounted() {
    // this.getTemperature()
    // this.getWaterPressure()
    // this.lightinitEchart()

    this.dateChange()
    this.getWarningData()
    // this.temperatureinitEcharts();
    // this.pressureinitEcharts();
  },
  methods: {
    moment,
    chartTypeChange(){
      this.dataYear=moment().format('YYYY')
      this.dateChange()
    },
    getWarningData(){
      getWarningData({searchTime:moment().format('yyyy-MM-DD')}).then(res=>{
        this.warningData=res.data
      })
    },
    dateChange(){
      if(this.chartType===1){
        this.getTemperature()
      }else if(this.chartType===2){
        this.getWaterPressure()
      }else {
        this.lightinitEchart()
      }
    },
    //获取水温趋势图
    getTemperature(){
      waterTemperatureData({searchDate:this.dataYear}).then(res=>{
        this.temperatureData=res.data
        this.temperatureinitEcharts();
      })
    },

    //获取水压趋势图
    getWaterPressure(){
      waterPressureData({searchDate:this.dataYear}).then(res=>{
        this.pressureData=res.data
        this.pressureinitEcharts();
      })
    },
    async getWarningList(){
      const {data} =  await warningListTen()
      this.tableData = data
    },
    lightinitEchart() {
      const option = {
        xAxis: {
          type: "category",
          data: this.xData,
        },
        // legend: {
        //   data: ["消费人数", "消费金额"],
        //   bottom: "0px",
        // },
        yAxis: {},
        series: [
          // {
          //   name: "消费人数",
          //   type: "bar", //形状为柱状图
          //   itemStyle: {
          //     width: "200px",
          //   },
          //   barWidth: "50%",
          //   data: this.yData,
          // },
          {
            // name: "",
            name: "消费金额",
            type: "line",
            data: [15, 30, 46, 20, 20,15, 30, 46, 20, 20, 30, 30],
            itemStyle: {
              color: "#8df",
            },
          },
        ],
        grid: {
          top: 10,
          left: "2%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
      };
      const myChart = echarts.init(
          document.getElementById("chartBox")
      );
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    temperatureinitEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          type: "category",
          data: this.temperatureData.timeSeries,
        },
        // legend: {
        //   data: ["消费人数", "消费金额"],
        //   bottom: "0px",
        // },
        yAxis: {},
        series: [
          {
            name: "消费金额",
            type: "line",
            data: this.temperatureData.dataReport,
            itemStyle: {
              color: "green",
            },
            label: {
              show: true,
              formatter: '{c}',
              position:'top'
            },
          },
        ],
        grid: {
          top: 25,
          left: "2%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
      };
      const myChart = echarts.init(
          document.getElementById("chartBox")
      );
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    pressureinitEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          type: "category",
          data: this.pressureData.timeSeries,
        },
        yAxis: {},
        series: [
          {
            name: "消费金额",
            type: "line",
            data: this.pressureData.dataReport,
            itemStyle: {
              color: "yellow",
            },
            label: {
              show: true,
              formatter: '{c}',
              position:'top'
            },
          },
        ],
        grid: {
          top: 25,
          left: "2%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
      };
      const myChart = echarts.init(document.getElementById("chartBox"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
 .container-center{
   display: flex;
   flex-flow: row;
   width: 100%;
 }
.card-title{
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
}
.consumption {
  display: flex;

  .consumption-item {
    width: 33%;
    display: flex;
    align-items: center;
    .consumption-item-img {
      width: 47px;
      margin-right: 15px;
    }
    .consumption-item-title {
      width: 40px;
      font-size: 17px;
      font-weight: bolder;
      color: #000000;
    }
    .consumption-item-box{
      font-size: 15px;
      margin-left: 10px;
    }
    .box-num{
      font-size: 24px;
      font-weight: bolder;
      color: red;
    }
  }
}

</style>
